<template>
  <d2-container better-scroll>
    <el-row class="header navbar bg-white shadow">
      <div class="btn-group tool-button mt5">
        <el-button size="medium"
                   @click="openAdd"><i class="ti-plus"></i> 新建单位</el-button>
      </div>
    </el-row>
    <el-row class="el-table-container">
      <el-table :key="tableKey"
                :data="tableData"
                style="width: 100%"
                size="small"
                :highlight-current-row="true"
                row-key="id"
                lazy
                :load="loadChild">
        <el-table-column label="单位名称"
                         header-align="center"
                         prop="name"
                         width="200"
                         :show-overflow-tooltip="true"
                         align="left">
        </el-table-column>
        <el-table-column label="地址"
                         header-align="center"
                         prop="address"
                         :show-overflow-tooltip="true"
                         align="center">
        </el-table-column>
        <el-table-column label="电话"
                         header-align="center"
                         prop="telephone"
                         :show-overflow-tooltip="true"
                         align="center">
        </el-table-column>
        <el-table-column label="网址"
                         header-align="center"
                         prop="website"
                         :show-overflow-tooltip="true"
                         align="center">
        </el-table-column>
        <el-table-column label="操作"
                         header-align="center"
                         prop="website"
                         :show-overflow-tooltip="true"
                         align="center"
                         width="120">
          <template slot-scope="scope">
            <el-dropdown @command="dropdownCommand">
              <el-button size="mini"
                         icon="el-icon-s-tools">
                <i class="ti-settings"></i>
                <span class="ti-angle-down"></span>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{type:'edit',id:scope.row.id,name:scope.row.name}">
                  修改
                </el-dropdown-item>
                <el-dropdown-item :command="{type:'delete',id:scope.row.id,name:scope.row.name}"
                                  v-if="scope.row.path!='0001'">
                  删除
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog title="新建单位"
               :visible.sync="addDialogVisible"
               :close-on-click-modal="false"
               width="40%">
      <el-form :model="formData"
               ref="addForm"
               :rules="formRules"
               size="small"
               label-width="80px">
        <el-form-item prop="parentId"
                      label="上级单位"
                      label-width="80px">
          <el-cascader :props="props"
                       :options="options"
                       v-model="parentUnit"
                       placeholder="不选择则为顶级"
                       style="width: 100%"></el-cascader>
        </el-form-item>
        <el-form-item prop="name"
                      label="单位名称">
          <el-input maxlength="100"
                    placeholder="单位名称"
                    v-model="formData.name"
                    auto-complete="off"
                    tabindex="2"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="aliasName"
                      label="单位别名">
          <el-input maxlength="100"
                    placeholder="单位别名"
                    v-model="formData.aliasName"
                    auto-complete="off"
                    tabindex="3"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="unitcode"
                      label="机构编码">
          <el-input maxlength="100"
                    placeholder="机构编码"
                    v-model="formData.unitcode"
                    auto-complete="off"
                    tabindex="4"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="address"
                      label="单位地址">
          <el-input maxlength="100"
                    placeholder="单位地址"
                    v-model="formData.address"
                    auto-complete="off"
                    tabindex="5"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="telephone"
                      label="联系电话">
          <el-input maxlength="100"
                    placeholder="联系电话"
                    v-model="formData.telephone"
                    auto-complete="off"
                    tabindex="6"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="email"
                      label="单位邮箱">
          <el-input maxlength="100"
                    placeholder="单位邮箱"
                    v-model="formData.email"
                    auto-complete="off"
                    tabindex="7"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="website"
                      label="单位网站">
          <el-input maxlength="100"
                    placeholder="单位网站"
                    v-model="formData.website"
                    auto-complete="off"
                    tabindex="8"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="note"
                      label="单位介绍">
          <el-input type="textarea"
                    v-model="formData.note"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="doAdd">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑单位"
               :visible.sync="editDialogVisible"
               :close-on-click-modal="false"
               width="40%">
      <el-form :model="formData"
               ref="editForm"
               :rules="formRules"
               size="small"
               label-width="80px">
        <el-form-item prop="name"
                      label="单位名称">
          <el-input maxlength="100"
                    placeholder="单位名称"
                    v-model="formData.name"
                    auto-complete="off"
                    tabindex="2"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="aliasName"
                      label="单位别名">
          <el-input maxlength="100"
                    placeholder="单位别名"
                    v-model="formData.aliasName"
                    auto-complete="off"
                    tabindex="3"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="unitcode"
                      label="机构编码">
          <el-input maxlength="100"
                    placeholder="机构编码"
                    v-model="formData.unitcode"
                    auto-complete="off"
                    tabindex="4"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="address"
                      label="单位地址">
          <el-input maxlength="100"
                    placeholder="单位地址"
                    v-model="formData.address"
                    auto-complete="off"
                    tabindex="5"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="telephone"
                      label="联系电话">
          <el-input maxlength="100"
                    placeholder="联系电话"
                    v-model="formData.telephone"
                    auto-complete="off"
                    tabindex="6"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="email"
                      label="单位邮箱">
          <el-input maxlength="100"
                    placeholder="单位邮箱"
                    v-model="formData.email"
                    auto-complete="off"
                    tabindex="7"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="website"
                      label="单位网站">
          <el-input maxlength="100"
                    placeholder="单位网站"
                    v-model="formData.website"
                    auto-complete="off"
                    tabindex="8"
                    type="text"></el-input>
        </el-form-item>
        <el-form-item prop="note"
                      label="单位介绍">
          <el-input type="textarea"
                    v-model="formData.note"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="doEdit">确 定</el-button>
      </span>
    </el-dialog>
  </d2-container>
</template>
<script>
export default {
  data: function () {
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      tableData: [],
      tableKey: '',
      formData: {
        id: '',
        parentId: ''
      },
      formRules: {
        name: [
          { required: true, message: '单位名称', trigger: 'blur' }
        ],
        email: [
          { required: false, message: '单位邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
      options: [],
      parentUnit: [],
      props: {
        lazy: true,
        checkStrictly: true,
        multiple: false,
        lazyLoad: (node, resolve) => {
          this.$post('/sys/unit/tree', { pid: node.value }).then(res => {
            if (res.code === 0) {
              resolve(res.data)
            }
          })
        }
      }
    }
  },
  methods: {
    openAdd: function () {
      this.addDialogVisible = true
      this.formData = {}// 打开新增窗口,表单先清空
      this.parentUnit = []
      this.options = []
    },
    doAdd: function () {
      this.$refs['addForm'].validate(valid => {
        if (valid) { // 表单验证通过
          this.formData.parentId = this.parentUnit[this.parentUnit.length - 1] || ''
          this.$post('/sys/unit/addDo', this.formData).then(res => {
            if (res.code === 0) {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.addDialogVisible = false
              this.initTreeTable()
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        }
      })
    },
    doEdit: function () {
      this.$refs['editForm'].validate(valid => {
        if (valid) { // 表单验证通过
          this.formData.parentId = this.parentUnit[this.parentUnit.length - 1]
          this.$post('/sys/unit/editDo', this.formData).then(res => {
            if (res.code === 0) {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.editDialogVisible = false
              this.initTreeTable()
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        }
      })
    },
    initTreeTable: function () {
      this.$post('/sys/unit/child', { pid: '' }).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
          this.tableKey = +new Date()
        }
      })
    },
    loadChild: function (tree, treeNode, resolve) {
      this.$post('/sys/unit/child', { pid: tree.id }).then(res => {
        if (res.code === 0) {
          resolve(res.data)
        }
      })
    },
    dropdownCommand: function (command) { // 监听下拉框事件
      if (command.type === 'edit') {
        this.$post('/sys/unit/edit/' + command.id, {}).then(res => {
          if (res.code === 0) {
            this.formData = res.data// 加载后台表单数据
            this.editDialogVisible = true// 打开编辑窗口
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      }
      if (command.type === 'delete') {
        this.$confirm('此操作将删除 ' + command.name, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: (a, b) => {
            if (a === 'confirm') { // 确认后再执行
              this.$post('/sys/unit/delete/' + command.id, {}).then(res => {
                if (res.code === 0) {
                  this.$message({
                    message: res.msg,
                    type: 'success'
                  })
                  this.initTreeTable()
                } else {
                  this.$message({
                    message: res.msg,
                    type: 'error'
                  })
                }
              })
            }
          }
        })
      }
    }
  },
  created: function () {
    this.initTreeTable()
  }

}
</script>
<style scoped>
</style>
